<template>

    <el-table style="width: 100%" :data="diyList" highlight-current-row >

        <el-table-column property="id" label="ID" width="80">
        </el-table-column>

        <el-table-column property="title" label="标题" width="">
            
        </el-table-column>

        <el-table-column property="home_setted" label="是否为首页" width="">
            <template #default="scope">
                <span v-if="scope.row.home_setted == 1">是</span>
                <span v-if="scope.row.home_setted == 0">否</span>
            </template>
        </el-table-column>

        <el-table-column property="status" label="状态" width="">
            <template #default="scope">
                <span v-if="scope.row.status == 1">显示</span>
                <span v-if="scope.row.status == 0">隐藏</span>
            </template>
        </el-table-column>

        <el-table-column property="" label="操作" width="">
            <template #default="scope">
                <el-button type="primary" @click="gotoEdit(scope.row.id)" >编辑</el-button>
                <el-button type="danger" @click="deleteDiy( scope.row.id )" >删除</el-button>
                <el-button type="danger" @click="set_home( scope.row.id )" >设为首页</el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class=" table-below ">
        <a class="el-button el-button--primary"
           href="#/main/design/mobile/diy/add">添加</a>
        <!-- <el-pagination
            @current-change="changePage"
            :page-size="per_page"
            layout="prev, pager, next" :total="total" /> -->
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
const VITE_URL = window.VITE_URL;
const diyList = ref<Array<object>>([])

// const total:any = ref<number>(10)
// const per_page:any = ref<number>(15)
// const current_page:any = ref<number>(1)

const router = useRouter();    
const getDiyList = () => {
    console.log( 'getDiyList' )
    const url: string = VITE_URL + '/admin.design.diy/index' + '?platform=xcx';
    axios.get(url).then( (res:any) => {
        console.log( res )
        diyList.value = res.data;

        
    })

}
getDiyList();

const gotoEdit = ( id:number )=>{

    router.push('/main/design/mobile/diy/' + id );
}

const set_home = ( id:number )=>{

    const url: string = VITE_URL + '/admin.design.diy/set_home?diy_id=' + id;
    axios.post(url).then( (res:any) => {

        console.log( res )
        
    })

}
const deleteDiy = () => {
    
}

// const changePage = ( e:number ):void => {

//     current_page.value = e;

// }

</script>